<div class="my-class">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 col-lg-3">
                <div class="card bg-primary">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">今日交易额</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{{$today_money}}</p>
                        </div>
                        <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                    class="fa fa-rmb fa-1-5x"></i></span></div>
                    </div>
                </div>
            </div>


            <div class="col-sm-6 col-lg-3">
                <div class="card bg-danger">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">用户总数</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{{$all_user_num}}</p>
                        </div>
                        <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                    class="fa  fa-users fa-1-5x"></i></span></div>
                    </div>
                </div>
            </div>


            <div class="col-sm-6 col-lg-3">
                <div class="card bg-success">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">订单数</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{{$order_num}}</p>
                        </div>
                        <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                    class="fa  fa-reorder fa-1-5x"></i></span></div>
                    </div>
                </div>
            </div>


            <div class="col-sm-6 col-lg-3">
                <div class="card bg-purple">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">待发货</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{{$dai_order_num}}</p>
                        </div>
                        <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                    class="fa fa-desktop fa-1-5x"></i></span></div>
                    </div>
                </div>
            </div>


        </div>


        <div class="row">
            <div class="col-md-3">
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">分佣金额统计</h4>
                    <p>总金额：{{$fen_all_money}} 提货券：{{$ti_all_money}}</p>
                    <hr>
                    <p class="mb-0">本月金额：{{$fen_month_money}} 提货券：{{$ti_month_money}}</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">余额统计</h4>
                    <p>钱包总金额：{{$user_all_money}} </p>
                    <hr>
                    <p class="mb-0">提货券总金额：{{$user_all_repeat_money}}
                </div>
            </div>
            <div class="col-md-3">
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">业绩统计</h4>
                    <p>总金额：{{$all_money}} </p>
                    <hr>
                    <p class="mb-0">本月金额：{{$month_monty}}
                </div>
            </div>
            <div class="col-md-3">
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">订单统计</h4>
                    <p>总订单数：{{$order_num}}</p>
                    <hr>
                    <p class="mb-0">本月订单数：{{$order_month_num}}</p>
                </div>
            </div>
        </div>


        <div class="row">
            {{--            <div class="col-sm-6 col-lg-3">--}}
            <div class="col-md-6">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>每日用户</h4>
                            </div>
                            <div class="card-body">
                                <div id="usermain" style="width: 100%;height:400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>


            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-12">

                        <div class="card">
                            <div class="card-header">
                                <h4>交易历史记录</h4>
                            </div>
                            <div class="card-body">
                                <div id="ordermain" style="width: 100%;height:400px;"></div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<style>
    .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .img-avatar-48 {
        width: 48px !important;
        height: 48px !important;
        line-height: 48px;
    }

    .bg-primary {
        background-color: #33cabb !important;
        color: #fff !important;
    }

    .bg-danger {
        background-color: #f96868 !important;
        color: #fff !important;
    }

    .bg-success {
        background-color: #15c377 !important;
        color: #fff !important;
    }

    .bg-purple {
        background-color: #926dde !important;
        color: #fff !important;
    }

    .pull-left {
        float: left !important;
    }

    .bg-translucent {
        background-color: rgba(255, 255, 255, 0.175);
    }

    .pull-right {
        float: right !important;
    }

    .fa-1-5x {
        font-size: 1.5em;
    }

    .img-avatar {
        display: inline-block !important;
        width: 64px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        vertical-align: middle;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }
</style>

<!--
     引入页面所需的静态资源，这里会按需加载
    js脚本不能直接包含初始化操作，否则页面刷新后无效
-->
{!! admin_js(['/js/echarts.min.js']) !!}
<script init=".my-class">
    // js代码也可以放在模板里面
    console.log('所有JS脚本都加载完了!!!');
    var user_line = @json($user_line);
    var order_line = @json($order_line);
    console.log(user_line);
    console.log(order_line);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('usermain'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: user_line['time']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: user_line['count'],
                type: 'line',
                smooth: true,
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        fontSize: 14
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    //订单的

    // 基于准备好的dom，初始化echarts实例
    var orderChart = echarts.init(document.getElementById('ordermain'));

    // 指定图表的配置项和数据
    var userOption = {
        xAxis: {
            type: 'category',
            data: order_line['time']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: order_line['count'],
                type: 'line',
                smooth: true,
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        fontSize: 14
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    orderChart.setOption(userOption);
</script>
